<!doctype html>
<html class="export" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry &#xB7; Methods</title>

    <link rel="stylesheet" href="css/masonry-docs.css?3" media="screen">

</head>
<body class="page--" data-page="">


  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--extras">
          <a href="extras.html">Extras</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>


  <div id="content" class="content container">

      <h1>Methods</h1>

    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#layout">Layout</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layout-masonry">layout / .masonry()</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutitems">layoutItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#stamp">stamp</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#unstamp">unstamp</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#adding-removing-items">Adding &amp; removing items</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#appended">appended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#prepended">prepended</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#additems">addItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#remove">remove</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#events">Events</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#on">on</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#off">off</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#once">once</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#utilities">Utilities</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#reloaditems">reloadItems</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#destroy">destroy</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getitemelements">getItemElements</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#jquery-fn-data-masonry">jQuery.fn.data(&apos;masonry&apos;)</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#masonry-data">Masonry.data</a></li>
</ul>


<p>Methods are actions done by Masonry instances.</p>

<p>With jQuery, methods follow the jQuery UI pattern <code>.masonry( <span class="string">&apos;methodName&apos;</span> <span class="comment">/* arguments */</span> )</code>.</p>

<pre><code class="js"><span class="jquery_var">$grid</span>.masonry()
  .append( elem )
  .masonry( <span class="string">&apos;appended&apos;</span>, elem )
  <span class="comment">// layout</span>
  .masonry();
</code></pre>

<div class="call-out">
  <p>jQuery chaining is broken by methods that return values: (i.e. 
    <a href="#getitemelements"><code>getItemElements</code></a>,
    <a href="#getitem"><code>getItem</code></a>,
    <a href="#on"><code>on</code></a>, and
    <a href="#off"><code>off</code></a>).
  </p>
</div>

<p>Vanilla JavaScript methods look like <code>masonry.methodName( <span class="comment">/* arguments */</span> )</code>. Unlike jQuery methods, they cannot be chained together.</p>

<pre><code class="js"><span class="comment">// vanilla JS</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {...});
gridElement.appendChild( elem );
<span class="masonry_var">msnry</span>.appended( elem );
<span class="masonry_var">msnry</span>.layout();
</code></pre>


<h2 id="layout">Layout</h2>


<h3 id="layout-masonry">layout / .masonry()</h3>

<p>Lays out all item elements. <code>layout</code> is useful when an item has changed size, and all items need to be laid out again.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry()
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.layout()
</code></pre>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry({
  <span class="attr">columnWidth</span>: <span class="number">80</span>
});
<span class="comment">// change size of item by toggling gigante class</span>
<span class="jquery_var">$grid</span>.on( <span class="string">&apos;click&apos;</span>, <span class="string">&apos;.grid-item&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  $(<span class="keyword">this</span>).toggleClass(<span class="string">&apos;gigante&apos;</span>);
  <span class="comment">// trigger layout after item size changes</span>
  <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="layout-demo">
    <p class="instruction">Click item to toggle size</p>
  
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
  
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/JdEyYQ">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/vdkJn">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>


<h3 id="layoutitems">layoutItems</h3>

<p>Lays out specified items.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;layoutItems&apos;</span>, items, isStill )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.layoutItems( items, isStill )
</code></pre>

<p class="argument">
  <code class="argument__code">items</code>
  <span class="argument__type"><i>Array</i> of <i>Masonry.Item</i>s</span>
</p>

<p class="argument">
  <code class="argument__code">isStill</code>
  <span class="argument__type"><i>Boolean</i></span>
  <span class="argument__description">Disables transitions</span>
</p>


<h3 id="stamp">stamp</h3>

<p>Stamps elements in the layout. Masonry will lay out item elements <em>around</em> stamped elements.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;stamp&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.stamp( elements )
</code></pre>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<p>Set <a href="options.html#itemselector"><code>itemSelector</code></a> so that stamps do not get used as layout items.</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry({
  <span class="comment">// specify itemSelector so stamps do get laid out</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  <span class="attr">columnWidth</span>: <span class="number">80</span>
});
<span class="keyword">var</span> $stamp = <span class="jquery_var">$grid</span>.find(<span class="string">&apos;.stamp&apos;</span>);
<span class="keyword">var</span> isStamped = <span class="literal">false</span>;

$(<span class="string">&apos;.stamp-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="comment">// stamp or unstamp element</span>
  <span class="keyword">if</span> ( isStamped ) {
    <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;unstamp&apos;</span>, $stamp );
  } <span class="keyword">else</span> {
    <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;stamp&apos;</span>, $stamp );
  }
  <span class="comment">// trigger layout</span>
  <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;layout&apos;</span>);
  <span class="comment">// set flag</span>
  isStamped = !isStamped;
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="stamp-methods-demo">
    <button class="button stamp-button">Toggle stamped</button>
    <div class="grid grid--has-stamp grid--stamp-methods-demo">
      <div class="stamp stamp--stamp-methods-demo"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/MwJvbq">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/wKpjs">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>


<h3 id="unstamp">unstamp</h3>

<p>Un-stamps elements in the layout, so that Masonry will no longer layout item elements around them. <a href="#stamp">See demo above</a>.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;unstamp&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.unstamp( elements )
</code></pre>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>


<h2 id="adding-removing-items">Adding &amp; removing items</h2>


<h3 id="appended">appended</h3>

<p>Adds and lays out newly appended item elements to the end of the layout.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;appended&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.appended( elements )
</code></pre>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">&apos;.append-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> $items = $(<span class="string">&apos;&lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt;&apos;</span>);
  <span class="comment">// append items to grid</span>
  <span class="jquery_var">$grid</span>.append( $items )
    <span class="comment">// add and lay out newly appended items</span>
    .masonry( <span class="string">&apos;appended&apos;</span>, $items );
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="appended-demo">
    <button class="button append-button">Append items</button>
    <div class="grid">
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/kwALv">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/nhekz">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>

<p>While jQuery can add an HTML string with <code>.append()</code>, Masonry&apos;s <code>appended</code> cannot. When adding content with jQuery ajax methods like <a href="https://api.jquery.com/jquery.get/"><code>$.get()</code></a> or <a href="https://api.jquery.com/jquery.ajax/"><code>$.ajax()</code></a>, wrap HTML content string in a jQuery object to use it with <code>appended</code>.</p>

<pre><code class="js"><span class="comment">// does not work</span>
$.get( <span class="string">&apos;page2&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{
  <span class="comment">// HTML string added, but items not added to Masonry</span>
  <span class="jquery_var">$grid</span>.append( content ).masonry( <span class="string">&apos;appended&apos;</span>, content );
});

<span class="comment">// does work</span>
$.get( <span class="string">&apos;page2&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"> content </span>) </span>{
  <span class="comment">// wrap content in jQuery object</span>
  <span class="keyword">var</span> $content = $( content );
  <span class="comment">// add jQuery object</span>
  <span class="jquery_var">$grid</span>.append( $content ).masonry( <span class="string">&apos;appended&apos;</span>, $content );
});
</code></pre>


<h3 id="prepended">prepended</h3>

<p>Adds and lays out newly prepended item elements at the beginning of layout.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;prepended&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.prepended( elements )
</code></pre>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">&apos;.prepend-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="comment">// create new item elements</span>
  <span class="keyword">var</span> $items = $(<span class="string">&apos;&lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt;&apos;</span>);
  <span class="comment">// prepend items to grid</span>
  <span class="jquery_var">$grid</span>.prepend( $items )
    <span class="comment">// add and lay out newly prepended items</span>
    .masonry( <span class="string">&apos;prepended&apos;</span>, $items );
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="prepended-demo">
    <button class="button prepend-button">Prepend items</button>
    <div class="grid">
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/vilFn">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/rVjgrL">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>


<h3 id="additems">addItems</h3>

<p>Adds item elements to the Masonry instance. <code>addItems</code> does not lay out items like <a href="#appended"><code>appended</code></a> or <a href="#prepended"><code>prepended</code></a>.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;addItems&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.addItems( elements )
</code></pre>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>


<h3 id="remove">remove</h3>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;remove&apos;</span>, elements )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.remove( elements )
</code></pre>

<p>Removes elements from the Masonry instance and DOM.</p>

<p class="argument">
  <code class="argument__code">elements</code>
  <span class="argument__type">
    <i>Element</i>,
    <i>jQuery</i> Object,
    <i>NodeList</i>, or
    <i>Array</i> of Elements
  </span>
</p>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="jquery_var">$grid</span>.on( <span class="string">&apos;click&apos;</span>, <span class="string">&apos;.grid-item&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="comment">// remove clicked element</span>
  <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;remove&apos;</span>, <span class="keyword">this</span> )
    <span class="comment">// layout remaining item elements</span>
    .masonry(<span class="string">&apos;layout&apos;</span>);
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="remove-demo">
    <p class="instruction">Click items to remove</p>
    <div class="grid grid--clickable">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/aOprQW">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/IBJeq">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>


<h2 id="events">Events</h2>


<h3 id="on">on</h3>

<p>Adds a <a href="events.html">Masonry event</a> listener.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;on&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.on( eventName, listener )
</code></pre>

<p class="argument">
  <code class="argument__code">eventName</code>
  <span class="argument__type"><i>String</i></span>
  <span class="argument__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="argument">
  <code class="argument__code">listener</code>
  <span class="argument__type"><i>Function</i></span>
</p>


<h3 id="off">off</h3>

<p>Removes a <a href="events.html">Masonry event</a> listener.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;off&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.off( eventName, listener )
</code></pre>

<p class="argument">
  <code class="argument__code">eventName</code>
  <span class="argument__type"><i>String</i></span>
  <span class="argument__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="argument">
  <code class="argument__code">listener</code>
  <span class="argument__type"><i>Function</i></span>
</p>


<h3 id="once">once</h3>

<p>Adds a <a href="events.html">Masonry event</a> listener to be triggered just once.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;once&apos;</span>, eventName, listener )
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.once( eventName, listener )
</code></pre>

<p class="argument">
  <code class="argument__code">eventName</code>
  <span class="argument__type"><i>String</i></span>
  <span class="argument__description">Name of a <a href="events.html">Masonry event</a></span>
</p>

<p class="argument">
  <code class="argument__code">listener</code>
  <span class="argument__type"><i>Function</i></span>
</p>

<pre><code class="js"><span class="jquery_var">$grid</span>.masonry( <span class="string">&apos;once&apos;</span>, <span class="string">&apos;layoutComplete&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="built_in">console</span>.log(<span class="string">&apos;layout is complete, just once&apos;</span>);
})
</code></pre>


<h2 id="utilities">Utilities</h2>


<h3 id="reloaditems">reloadItems</h3>

<p>Recollects all item elements.</p>

<p>For frameworks like Angular and React, <code>reloadItems</code> may be useful to apply changes to the DOM to Masonry.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;reloadItems&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.reloadItems()
</code></pre>


<h3 id="destroy">destroy</h3>

<p>Removes the Masonry functionality completely. <code>destroy</code> will return the element back to its pre-initialized state.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;destroy&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="masonry_var">msnry</span>.destroy()
</code></pre>

<div class="duo example">
  <div class="duo__cell example__code">
<pre><code class="js"><span class="keyword">var</span> masonryOptions = {
  <span class="attr">itemSelector</span>: <span class="string">&apos;.grid-item&apos;</span>,
  <span class="attr">columnWidth</span>: <span class="number">80</span>
};
<span class="comment">// initialize Masonry</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">&apos;.grid&apos;</span>).masonry( masonryOptions );
<span class="keyword">var</span> isActive = <span class="literal">true</span>;

$(<span class="string">&apos;.toggle-button&apos;</span>).on( <span class="string">&apos;click&apos;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{
  <span class="keyword">if</span> ( isActive ) {
    <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;destroy&apos;</span>); <span class="comment">// destroy</span>
  } <span class="keyword">else</span> {
    <span class="jquery_var">$grid</span>.masonry( masonryOptions ); <span class="comment">// re-initialize</span>
  }
  <span class="comment">// set flag</span>
  isActive = !isActive;
});
</code></pre>
  </div>
  <div class="duo__cell example__demo" data-js="destroy-demo">
    <button class="button toggle-button">Toggle Masonry</button>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
    </div>
    <p class="edit-demo">
        <a href="https://codepen.io/desandro/pen/jPyoRE">Edit this demo</a>
        or <a href="https://codepen.io/desandro/pen/EogCw">vanilla JS demo</a> on CodePen
    </p>
  </div>
</div>


<h3 id="getitemelements">getItemElements</h3>

<p>Returns an array of item elements.</p>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="keyword">var</span> elems = <span class="jquery_var">$grid</span>.masonry(<span class="string">&apos;getItemElements&apos;</span>)
<span class="comment">// vanilla JS</span>
<span class="keyword">var</span> elems = <span class="masonry_var">msnry</span>.getItemElements()
</code></pre>

<p class="argument">
  <code class="argument__code">elems</code>
  <span class="argument__type"><i>Array</i> of <i>Element</i>s</span>
</p>


<h3 id="jquery-fn-data-masonry">jQuery.fn.data(&apos;masonry&apos;)</h3>

<p>Get the Masonry instance from a jQuery object. Masonry instances are useful to access Masonry properties.</p>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_var">msnry</span> = $(<span class="string">&apos;.grid&apos;</span>).data(<span class="string">&apos;masonry&apos;</span>)
<span class="comment">// access Masonry properties</span>
<span class="built_in">console</span>.log( <span class="masonry_var">msnry</span>.items.length + <span class="string">&apos; filtered items&apos;</span>  )
</code></pre>


<h3 id="masonry-data">Masonry.data</h3>

<p>Get the Masonry instance via its element. <code>Masonry.data()</code> is useful for getting the Masonry instance in JavaScript, after it has been initalized in HTML.</p>

<pre><code class="js"><span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( element )
</code></pre>

<p class="argument">
  <code class="argument__code">element</code>
  <span class="argument__type"><i>Element</i> or Selector <i>String</i></span>
</p>

<p class="argument">
  <code class="argument__code">msnry</code>
  <span class="argument__type"><i>Masonry</i></span>
</p>

<pre><code class="html"><span class="comment">&lt;!-- init Masonry in HTML --&gt;</span>
<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid&quot;</span> <span class="attr">data-masonry</span>=<span class="string">&apos;{...}&apos;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
</code></pre>

<pre><code class="js"><span class="comment">// jQuery</span>
<span class="comment">// pass in the element, $element[0], not the jQuery object</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( $(<span class="string">&apos;.grid&apos;</span>)[<span class="number">0</span>] )

<span class="comment">// vanilla JS</span>
<span class="comment">// using an element</span>
<span class="keyword">var</span> grid = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>)
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data( grid )
<span class="comment">// using a selector string</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="masonry_keyword">Masonry</span>.data(<span class="string">&apos;.grid&apos;</span>)
</code></pre>



  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--extras">
          <a href="extras.html">Extras</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
    <div class="container">
  
      <p class="site-footer__copy">
        Masonry is made by <a href="https://desandro.com">David DeSandro</a>.
        Make something rad with it.
      </p>
  
      <div class="showcase">
      
        <ul class="showcase-item-list">
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://isotope.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="isotope-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 350 350" width="100" height="100">
                      <path class="isotope-illo__color1" fill="#6C6" d="M80 170H30c-6 0-10-5-10-10v-50c0-6 5-10 10-10h50c6 0 10 5 10 10v50C90 166 86 170 80 170z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M80 90H30c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C90 86 86 90 80 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M160 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C170 86 166 90 160 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M240 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C250 86 246 90 240 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M320 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C330 86 326 90 320 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M155 165h-40c-6 0-10-5-10-10v-40c0-6 5-10 10-10h40c6 0 10 5 10 10v40 C165 161 161 165 155 165z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M230 160h-30c-6 0-10-5-10-10v-30c0-6 5-10 10-10h30c6 0 10 5 10 10v30 C240 156 236 160 230 160z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M305 155h-20c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20 C315 151 311 155 305 155z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M65 235H45c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20C75 231 71 235 65 235z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M140 230h-10c-6 0-10-5-10-10v-10c0-6 5-10 10-10h10c6 0 10 5 10 10v10 C150 226 146 230 140 230z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M305 235h-20c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20 C315 231 311 235 305 235z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M65 315H45c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20C75 311 71 315 65 315z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M150 320h-30c-6 0-10-5-10-10v-30c0-6 5-10 10-10h30c6 0 10 5 10 10v30 C160 316 156 320 150 320z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M220 230h-10c-6 0-10-5-10-10v-10c0-6 5-10 10-10h10c6 0 10 5 10 10v10 C230 226 226 230 220 230z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M235 325h-40c-6 0-10-5-10-10v-40c0-6 5-10 10-10h40c6 0 10 5 10 10v40 C245 321 241 325 235 325z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M320 330h-50c-6 0-10-5-10-10v-50c0-6 5-10 10-10h50c6 0 10 5 10 10v50 C330 326 326 330 320 330z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Isotope</h3>
                  <p class="showcase-item__description">Filter &amp; sort magical layouts</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://infinite-scroll.com">
                <div class="showcase-item__image">
                    <svg class="infinite-scroll-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 520 520" width="200" height="200">
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M90,110H10V90c0-22,18-40,40-40h40V110z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front1" d="M270,90L270,90c0-22-18-40-40-40h0H50h0c22,0,40,18,40,40v0v0v160h180V90z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M170,330v-20H90v20v0c0,22,18,40,40,40h0h40V330z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M350,150H210c-22,0-40,18-40,40v140v0c0,22-18,40-40,40h0h220V150z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front3" d="M430,470V270H250v160c0,22,18,40,40,40H430z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M250,190v20h180v-20c0-22-18-40-40-40H210h0C232,150,250,168,250,190L250,190z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M330,410v20v0c0,22-18,40-40,40h0h180c22,0,40-18,40-40v-20H330z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Infinite Scroll</h3>
                  <p class="showcase-item__description">Automatically add next page</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://flickity.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="flickity-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 360 360" width="100" height="100">
                      <path class="flickity-illo__color1" fill="#19F" d="M300 220L300 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color1" fill="#19F" d="M340 220L340 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color2" fill="#333" d="M320 290V180c0-18-10-35-27-43L240 110v180H320z"/>
                      <path class="flickity-illo__color3" fill="white" d="M240 300H120c-11 0-20-9-20-20V40c0-11 9-20 20-20h120c11 0 20 9 20 20v240C260 291 251 300 240 300z"/>
                      <path class="flickity-illo__color4" fill="#ED0" d="M230 260H130c-6 0-10-5-10-10V70c0-6 5-10 10-10h100c6 0 10 5 10 10v180 C240 256 236 260 230 260z"/>
                      <path class="flickity-illo__color2" fill="#333" d="M260 200h60v81c0 32-26 59-59 59h0c-34 0-61-27-61-61V240h20 C242 240 260 222 260 200L260 200z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M180 220h-60V100h60c6 0 10 5 10 10v100C190 216 186 220 180 220z"/>
                      <path class="flickity-illo__color1" fill="#19F" d="M240 220h-20c-6 0-10-5-10-10V110c0-6 5-10 10-10h20V220z"/>
                      <rect class="flickity-illo__color2" fill="#333" x="230" y="280" width="90" height="80"/>
                      <circle class="flickity-illo__color4" fill="#ED0" cx="180" cy="280" r="10"/>
                      <line class="flickity-illo__thumb" stroke="#333" stroke-width="60" stroke-linecap="round" x1="262" y1="290" x2="152" y2="240"/>
                      <path class="flickity-illo__color4" fill="#ED0" d="M190 50h-20c-6 0-10-5-10-10v0c0-6 5-10 10-10h20c6 0 10 5 10 10v0C200 46 196 50 190 50z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M80 220L80 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M40 220L40 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Flickity</h3>
                  <p class="showcase-item__description">Touch, responsive, flickable carousels</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://packery.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="packery-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
                      <path class="packery-illo__item" fill="#C09" d="M172 180H48c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 176 176 180 172 180z"/>
                      <path class="packery-illo__item" fill="#C09" d="M172 340H48c-4 0-8-4-8-8V208c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 336 176 340 172 340z"/>
                      <path class="packery-illo__item" fill="#C09" d="M492 660H368c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C500 656 496 660 492 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 660H528c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C660 656 656 660 652 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 500H368c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v124C660 496 656 500 652 500z"/>
                      <path class="packery-illo__item" fill="#C09" d="M332 660H48c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v284C340 656 336 660 332 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 340H528c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v284C660 336 656 340 652 340z"/>
                      <path class="packery-illo__draggie" fill="#EA0" d="M572 440H288c-4 0-8-4-8-8V148c0-4 4-8 8-8h284c4 0 8 4 8 8v284C580 436 576 440 572 440z"/>
                      <g>
                        <path class="packery-illo__hand" fill="white" d="M530 250c-11 0-20 9-20 20v-10c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20
                          s-20 9-20 20v20c-17 0-30 13-30 30c0 11 6 20 14 25l19 35c10 18 30 30 51 30h28
                          c43 0 78-35 78-78V270C550 259 541 250 530 250z"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="430" y1="300" x2="430" y2="340"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="470" y1="300" x2="470" y2="340"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="510" y1="300" x2="510" y2="340"/>
                      </g>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Packery</h3>
                  <p class="showcase-item__description">Gapless, draggable grid layouts</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="http://logo.pizza">
                <div class="showcase-item__image">
                    <svg class="logo-pizza-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
                      <path class="logo-pizza-illo__outline" fill="#C25" d="M513 91c-9-0-17 5-21 12l-80 160c-3 5-6 10-11 15l-47 47
                        c-5 5-12-1-9-7l32-64c5-11-2-23-14-23h-0c-121 0-268 70-327 180
                        C-9 497 35 609 196 609c138 0 279-85 327-180v0c5-11-2-23-14-23h-77c-13 0-19-15-10-24
                        l81-81c5-5 11-8 18-8l0 0c13 0 19 15 10 24L494 354c-6 6-6 14 0 20c3 3 6 4 10 4
                        c4 0 7-1 10-4l80-80h53c9 0 17-5 21-13C707 190 656 97 513 91z M334 281l-59 117
                        c-2 5-7 8-13 8H97c-4 0-6-4-3-7c49-64 143-114 236-124C333 275 335 278 334 281z
                         M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
                        C106 565 38 521 70 441z M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
                        c2-5 7-8 13-8h166C466 434 468 438 466 441z M446 318l-81 81c-5 5-11 8-18 8l0 0
                        c-13 0-19-15-10-24l81-81c5-5 11-8 18-8l0 0C449 294 455 309 446 318z M447 258L506 139
                        c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452C448 266 445 262 447 258z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M334 281l-59 117c-2 5-7 8-13 8H97c-4 0-6-4-3-7
                        c49-64 143-114 236-124C333 275 335 278 334 281z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
                        C106 565 38 521 70 441z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
                        c2-5 7-8 13-8h166C466 434 468 438 466 441z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M447 258L506 139c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452
                        C448 266 445 262 447 258z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Logo Pizza</h3>
                  <p class="showcase-item__description">Hot &amp; ready logos for sale</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="http://fizzy.school">
                <div class="showcase-item__image">
                    <svg class="witchie-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="200" height="200">
                      <circle class="witchie-logo__moon" fill="white" cx="500" cy="500" r="500"/>
                      <path class="witchie-logo__broom" fill="#EA0" d="M582 675a35 35 0 0 0 8-20 3 3 0 0 1 3-2h71a3 3 0 0 1 3 3 59 59 0 0 0 0 20 3 3 0 0 1-3 3h-79A3 3 0 0 1 582 675Zm219 4a13 13 0 0 0 13-14c-1-7-7-12-14-12h-44a3 3 0 0 0-3 3v21a3 3 0 0 0 3 3ZM299 660a203 203 0 0 1-27-36 8 8 0 0 0-4-3L178 582a13 13 0 0 0-18 12v77a8 8 0 0 0 8 8h22a5 5 0 0 1 2 10L164 703a8 8 0 0 0-4 7v28a13 13 0 0 0 18 12l146-63a3 3 0 0 0 1-5A197 197 0 0 1 299 660Z"/>
                      <path class="witchie-logo__dress" fill="#333" d="M326 705h4a13 13 0 0 1 13 13v8a13 13 0 0 0 4 9l13 13a13 13 0 0 1 0 19l-56 56c-10 10-26-0-22-13L314 714A13 13 0 0 1 326 705Zm397-79c-27 0-47 26-37 54 3 7 11 16 17 19a42 42 0 0 0 19 5 38 38 0 0 0 7-1 8 8 0 0 0 6-8v-62a8 8 0 0 0-6-8 38 38 0 0 0-7-1M840 397c-3-15-33-23-77-23a521 521 0 0 0-59 4 5 5 0 0 1-5-2L567 177a8 8 0 0 0-7-4 8 8 0 0 0-8 8l1 227a5 5 0 0 1-4 5c-74 24-123 55-119 76 2 8 11 14 26 18a3 3 0 0 1 1 4l-11 11c-20 20-56 30-92 30-31 0-63-8-84-23a5 5 0 0 0-3-1 5 5 0 0 0-5 5c0 78 68 173 183 173h75a10 10 0 0 0 7-3l38-38a16 16 0 0 0 0-23l-34-34a10 10 0 0 1 0-14l15-15a3 3 0 0 1 5 2v15a5 5 0 0 0 5 5H674a4 4 0 0 0 3-7l-90-90a3 3 0 0 1 1-4c34-19 59-49 67-84a3 3 0 0 1 2-2c6-1 12-1 17-1 22 0 37 5 39 14 1 6 3 11 2 17-5 17 1 31 8 31a6 6 0 0 0 2-0C797 448 845 419 840 397Z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Fizzy School</h3>
                  <p class="showcase-item__description">Lessons in JavaScript for jQuery newbies</p>
                </div>
              </a>
            </li>
      
        </ul> 
      
      </div>
  
    </div>
  </div>

  <script src="js/masonry-docs.min.js?2"></script>


</body>
</html>
